.customMaskInput-container {
    @include flexInline();
    @include flexAlignCenter();
    @include flexJustifyCenter;
    position: relative;
    width: 100%;
    height: 100%;
}

[class*="customMaskInput-input"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    z-index: 0;
    cursor: pointer;
}

.customMaskInput-mask {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px; /*IE10*/
    background-color: $white;
    background-size: 0;
    border-radius: $border-radius;
    border: 1px solid $border;
    transition: border-color .1s ease-in;
    pointer-events: none;
}


/* Shared state */
[class*="customMaskInput-input"]:checked + .customMaskInput-mask,
[class*="customMaskInput-input"]:indeterminate + .customMaskInput-mask {
    background-size: 200% 200%;
}

/* Hover and focus states */
.customMaskInput-container:hover [class*="customMaskInput-input"]:not(:disabled) + .customMaskInput-mask,
[class*="customMaskInput-input"]:focus + .customMaskInput-mask { border-color: $primary; }

/* Disabled state */
[class*="customMaskInput-input"][disabled]  { cursor: default }
[class*="customMaskInput-input"][disabled] + .customMaskInput-mask,
[class*="customMaskInput-input"]:disabled + .customMaskInput-mask { background-color: #e6e6e6}

/* Mobile mode */
body.appConfigBody-is-mobile {
    .customMaskInput-mask {
        width: 30px;
        height: 30px;
    }
}
